@import "variables";

section.rule-item {
  display: flex;
  height: max-content;
  margin-top: 10px;

  .tip {
    font-size: 14px;
    margin-right: 16px;
    line-height: 36px;
    color: @grey60-color;
  }

  .rule-serve {
    display: flex;
    align-items: flex-start;

    .select {
      width: 200px;
      nz-select{
        width: 100%;
      }
    }

    .percentage-body {
      font-size: 13px;
      height: max-content;
      margin-left: 24px;

      .percentage {
        width: 100%;
        display: flex;
        flex-direction: column;
        .item {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-top: 1px;
          margin-bottom: 5px;

          .percentage-number {
            display: flex;
            align-items: center;
            margin-right: 24px;

            .ant-input-group-wrapper {
              border: none;
              padding: 0;

              .ant-input-number {
                text-align: left;
                height: 36px;
                width: 100px;
                padding-right:0;
                border-top-left-radius: 8px;
                border-bottom-left-radius: 8px;
                line-height: 36px
              }
            }
          }

          .variation {
            display: inline-block;
          }
        }

        .total-percentage {
          width: 350px;
          align-self: flex-end;

          .rest-to-assign {
            text-align: left;

            .hundred-percent {
              display: inline-block;
              background-color: @red50-color;
              color: @white;
              border-radius: 4px;
              padding: 0 8px;
              margin: 0 4px;
            }
          }
        }

        .dispatch-key {
          width: 350px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          gap: 16px;

          .tooltip {
            cursor: pointer;
            font-size: 20px;
            color: @grey50-color;
          }
        }
      }
    }
  }
}

:host ::ng-deep .ant-slider {
    margin-left: 0;
    margin-right: 0;
}

:host ::ng-deep .ant-slider:hover .ant-slider-rail,
:host ::ng-deep .ant-slider-rail {
    background: #1E90FF;
}

:host ::ng-deep .ant-slider:hover .ant-slider-track,
:host ::ng-deep .ant-slider-track {
    background: #7FFFD4;
}
